<template>
  <el-form ref="form" :model="formdata" :rules="formrule" label-position="right" label-suffix=":" label-width="100px">
    <el-row>
      <el-col :span="12">
        <el-form-item label="用户姓名" prop="name">
          <el-input v-model="formdata.name" :readonly="method === 'edit'" placeholder="请输入用户姓名"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="用户类型" prop="type">
          <el-select v-model="formdata.type" clearable placeholder="请选择用户类型" style="width: 100%">
            <el-option v-for="(item,index) in localDict.user_type" :key="index" :label="item.label"
                       :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="用户状态" prop="status">
          <el-select v-model="formdata.status" clearable placeholder="请选择用户状态" style="width: 100%">
            <el-option v-for="(item,index) in localDict.user_status" :key="index" :label="item.label"
                       :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="出生日期" prop="birthday">
          <el-date-picker v-model="formdata.birthday" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
                          style="width: 100%"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="性别" prop="sex">
          <el-select v-model="formdata.sex" clearable placeholder="请选择用户性别" style="width: 100%">
            <el-option v-for="(item,index) in localDict.user_sex" :key="index" :label="item.label" :value="item.value"/>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="手机号码" prop="mobile">
          <el-input v-model="formdata.mobile" placeholder="请输入手机号码"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="formdata.email" placeholder="请输入电子邮箱"/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="显示排序" prop="sort">
          <el-input-number v-model="formdata.sort" :min="0" controls-position="right" style="width: 100%"/>
        </el-form-item>
      </el-col>
    </el-row>
    <el-form-item label="用户备注">
      <el-input v-model="formdata.remark" :rows="3" placeholder="请输入用户备注" type="textarea"/>
    </el-form-item>
  </el-form>
</template>

<script>

import {getOne, save} from "../../../../api/base";

export default {
  name: "UserModelForm",
  components: {},
  props: {
    id: String,
    method: String,
    visible: Boolean
  },
  data() {
    return {
      baseUrl: '/system/user',
      formdata: {},
      formrule: {
        // 表单校验
        name: [
          {required: true, message: "用户姓名不能为空", trigger: "blur"}
        ],
        code: [
          {required: true, message: "用户账号不能为空", trigger: "blur"}
        ],
        type: [
          {required: true, message: "用户类型不能为空", trigger: "blur"}
        ],
        scope: [
          {required: true, message: "权限字符不能为空", trigger: "blur"}
        ],
      },
      localDict: {
        user_sex: [],
        user_type: [],
        user_status: [],
      },
    }
  },
  created() {
    this.getLocalDict();
    if (this.method === 'edit') {
      this.getModel()
    }
  },
  methods: {
    async getLocalDict() {
      await this.getStaticData('system-user-sex').then(res => {
        this.localDict.user_sex = res.data
      })
      await this.getStaticData('system-user-type').then(res => {
        this.localDict.user_type = res.data
      })
      await this.getStaticData('system-user-status').then(res => {
        this.localDict.user_status = res.data
      })
    },
    getModel() {
      getOne(this.baseUrl, this.id).then(res => {
        this.formdata = res.data
      })
    },
    handleSubmit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          save(this.baseUrl, this.formdata).then(() => {
            this.$modal.msgSuccess("保存成功");
            this.$emit('ok')
          }).catch(() => {
            this.$emit('error')
          });
        }
      });
    },
    handleReset() {
      this.resetForm('form')
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
